var list = getImageList();

Vue.component('image-viewer', {
    props: {
        src: String,
        viewWidth: Number,
        viewHeight: Number,
        width: Number,
        height: Number
    },
    data: function() {
        return {
            full: false,
            mode: 'self',
            imgWidth: -1,
            imgHeight: -1
        }
    },
    template: `
        <div class="image-viewer" :style="areaStyle">
            <div class="controller">
                
                <select v-model='mode'>
                    <option value="self">自定义</option>
                    <option value="cover">填充</option>
                    <option value="contain">自适应</option>
                    <option value="original">原始图像</option>
                    <option value="follw-width">适应宽度</option>
                    <option value="follw-height">适应高度</option>
                </select>
                <div>
                </div>
                <div>
                    <input type="number" v-model.lazy.number="imgWidth" @change="changeMode" /> * 
                    <input type="number" v-model.lazy.number="imgHeight" @change="changeMode" />
                </div>
                

                <div>

                    <label><input type="checkbox" v-model="full"/>铺满窗口</label>
                    <label><input type="checkbox" v-model="sizeCanChanged"/>自定义</label>
                    <template v-if="sizeCanChanged">
                        <label><input type="checkbox" v-model="widthAuto"/> 宽度等比例缩放</label>
                        <label><input type="checkbox" v-model="heightAuto"/> 高度等比例缩放</label>
                    </template>
                </div>
            </div>
            <div class="view-area" :style="viewStyle">
                <transition name="image-viewer">
                    <lazy-img class="image-viewer-item" :src="src" :width="curVw" :height="curVh" :use-slot="true" :key="src">
                        <smart-img
                            :mode="mode"
                            :size="[imgWidth, imgHeight]"
                            slot-scope="props" v-bind="props"
                            :key="src"
                            @img-resize="updateSize"
                            ></smart-img>
                    </lazy-img>
                </transition>
            </div>
            
        </div>
    `,
    computed: {
        areaStyle: function() {
            return {
                width: this.width + 'px',
                height: this.height + 'px'
            }
        },
        sizeCanChanged: {
            get: function() {
                return this.mode == 'self';

            },
            set: function(nv, ov) {
                if (nv) {
                    this.mode = 'self';
                } else {
                    this.mode = 'contain';
                }
            }
        },
        widthAuto: {
            get: function() {
                return this.imgWidth < 0;
            },
            set: function(nv) {
                if (!nv) {
                    this.imgWidth = this.curSize[0];
                } else {
                    this.imgWidth = -1;
                }
            }
        },
        heightAuto: {
            get: function() {
                return this.imgHeight < 0;
            },
            set: function(nv) {
                if (!nv) {
                    this.imgHeight = this.curSize[1];
                } else {
                    this.imgHeight = -1;
                }
            }
        },
        curVw: function() {
            return this.full ? this.width : this.viewWidth;
        },
        curVh: function() {
            return this.full ? this.height : this.viewHeight;
        },
        viewStyle: function() {
            return {
                width: this.curVw + 'px',
                height: this.curVh + 'px',
                position: 'absolute',
                top: (this.width - this.curVw) / 2 + 'px',
                left: (this.height - this.curVh) / 2 + 'px'
            }
        }
    },
    methods: {
        updateSize: function(w, h) {
            var w = Math.floor(w * 100) / 100;
            var h = Math.floor(h * 100) / 100;
            if (!this.sizeCanChanged) {
                this.imgWidth = w;
                this.imgHeight = h;
            } else {
                this.curSize = [w, h];
            }   
        },
        changeMode: function() {
            this.sizeCanChanged = true;
        }
    },
    created: function() {
        // var vm = this;
        // vm.$watch('imgWidth', function() {
        //     if (vm.mode != 'self') {
        //         vm.mode = 'self';
        //     }
        // });
        // vm.$watch('imgHeight', function() {
        //     if (vm.mode != 'self') {
        //         vm.mode = 'self';
        //     }
        // });
    }
})

